<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <title>积分商城-{eyou:global name='web_name' /}</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
        <link href="{eyou:global name='web_cmspath'/}/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        {eyou:static file="users/skin/css/bootstrap.min.css"/}
        {eyou:static file="users/skin/css/basic.css"/}
        {eyou:static file="users/skin/css/eyoucms.css"/}
        {eyou:static file="users/skin/css/element/index.css" /}
        {eyou:static file="users/skin/css/e-user.css" /}
        {eyou:static file="skin/css/points.css" code="points_shop"/}
        {eyou:include file="/template/pc/users/skin/css/diy_css.htm"/}
        {eyou:static file="/public/static/common/js/jquery.min.js"/}
        {eyou:static file="skin/js/common.js" code="points_shop"/}
        {eyou:static file="/public/plugins/layer-v3.1.0/layer.js"/}
        {eyou:static file="/public/static/common/js/tag_global.js"/}
    </head>

    <body class="centre">
        {eyou:include file="/template/pc/users/users_header.htm" /}
        <div class="breadcrumbs"></div>

        <div class="ey-body-bg">
            <div class="ey-body pd0">
                <div class="ey-container w1226">
                    {eyou:include file="/template/pc/users/users_left.htm" /}
                    <div class="ey-con fr">
                        <div class="el-main main-bg xin_mian">
                            <div class="el-row shop-oper"><h1 class="title">积分商城</h1></div>
                            <div class="ey-con-inside mt20">
                                <div class="carousel">
                                    <div id="showbox">
                                        {volist name="$imageList" id="vo"}
                                        <img src="{$vo.image_url}" width="400" height="400"/>
                                        {/volist}
                                    </div>
                                    <div id="showsum">
                                        <!--展示图片里边-->
                                    </div>
                                    <p class="showpage">
                                        <a href="javascript:void(0);" id="showlast"> < </a>
                                        <a href="javascript:void(0);" id="shownext"> > </a>
                                    </p>
                                </div>

                                <div class="product-info">
                                    <div class="tb-property">
                                        <div class="tr-nobdr"><h3>{$pointsGoods.title}</h3></div>
                                        <div class="txt">
                                            <span class="nowprice"><i id="goods_points">{$pointsGoods.goods_points}</i>积分 {notempty name="$pointsGoods.goods_price"}<span> + <i id="goods_price">{$pointsGoods.goods_price}</i>元</span>{/notempty}</span>
                                        </div>
                                        {notempty name="$allGoodsSpec"}
                                        {volist name="$allGoodsSpec" id="vo1"}
                                        <div class="txt-h allGoodsSpecList">
                                            <span class="tex-o">{$vo1.spec_name}</span>
                                            <ul class="glist" id="glist">
                                                {volist name="$vo1.findGoodsSpec" id="vo2"}
                                                <li><a class="{if condition='!empty($vo2.checked)'}on{/if}" title="{$vo2.spec_value}" href="javascript:void(0);" data-spec_value_id="{$vo2.spec_value_id}" onclick="goodsSwitchSpec(this);">{$vo2.spec_value}</a></li>
                                                {/volist}
                                            </ul>
                                        </div>
                                        {/volist}
                                        {/notempty}
                                        <div class="gcIpt">
                                            <span class="guT">数量</span>
                                            <input type="button" value="-" id="reduce" onclick="goodsBuyNumberAction('reduce');" />
                                            <input type="text" value="1" id="goodsBuyNumber" style="width: 90px; text-align: center; color: #0F0F0F;" onkeyup="goodsBuyNumberAction('change');"/>
                                            <input type="button" value="+" onclick="goodsBuyNumberAction('increase');"/>
                                            <span class="Hgt">库存（<span id="goods_stock">{$pointsGoods.goods_stock}</span>）</span>
                                        </div>
                                        <div class="nobdr-btns">
                                            <button class="addcart" onclick="confirmSubmit();">立即兑换</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="details"></div>
                                <div class="details">
                                    <ul class="tab-nav">
                                        <li class="active"><a href="#overview" onclick="toggleTab('overview')">商品介绍</a></li>
                                        <li class=""><a href="#specification" onclick="toggleTab('specification')">商品参数</a></li>
                                    </ul>
                                    <div class="details-con" id="overviewContent" style="display: block;">
                                        {$pointsGoods.content}
                                    </div>
                                    <div class="details-con" id="specificationContent" style="display: none;">
                                        <ul class="attribute">
                                            {volist name="$pointsGoods.attr_list" id="vo3"}
                                            <li><span>{$vo3.attr_name}：</span>{$vo3.attr_value}</li>
                                            {/volist}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {$hidden}

        <script type="text/javascript">
            $(document).ready(function() {
                $('#reduce').attr('disabled', true);
            });

            function goodsBuyNumberAction(symbol) {
                var goodsBuyNumber = $('#goodsBuyNumber').val();
                if ('reduce' == symbol) {
                    goodsBuyNumber = parseInt(goodsBuyNumber) - 1;
                    if (1 >= parseInt(goodsBuyNumber)) $('#reduce').attr('disabled', true);
                } else if ('increase' == symbol) {
                    $('#reduce').attr('disabled', false);
                    goodsBuyNumber = parseInt(goodsBuyNumber) + 1;
                } else if ('change' == symbol) {
                    goodsBuyNumber = goodsBuyNumber.replace(/[^\.\d]/g, '');
                    if (0 >= parseInt(goodsBuyNumber) || !goodsBuyNumber) goodsBuyNumber = 1;
                }
                $('#goodsBuyNumber').val(parseInt(goodsBuyNumber));
            }

            function goodsSwitchSpec(obj) {
                // 设置选中状态
                $(obj).addClass('on').parent().siblings().find('.on').removeClass('on');
                // 获取选中规格值
                var spec_keys = '';
                $('.allGoodsSpecList .on').each(function() {
                    spec_keys += $(this).data('spec_value_id');
                    spec_keys += '_';
                });
                spec_keys = spec_keys.substring(0, spec_keys.length-1);
                spec_keys = spec_keys.split('_');
                spec_keys = spec_keys.sort(sortNumber);
                spec_keys = spec_keys.join('_');
                var allGoodsSpecValue = pointsGoodsSpec.allGoodsSpecValue;
                for (var i = 0; i < allGoodsSpecValue.length; i++) {
                    if (spec_keys == allGoodsSpecValue[i]['spec_keys']) {
                        console.log(allGoodsSpecValue[i]);
                        $('#goods_stock').html(parseInt(allGoodsSpecValue[i]['spec_stock']));
                        $('#goods_points').html(parseInt(allGoodsSpecValue[i]['spec_points']));
                        $('#goods_price').html(parseFloat(allGoodsSpecValue[i]['spec_price'].toFixed(2)));
                        pointsGoodsSpec.defaultGoodsSpec.spec_id = parseInt(allGoodsSpecValue[i]['spec_id']);
                        pointsGoodsSpec.defaultGoodsSpec.spec_keys = allGoodsSpecValue[i]['spec_keys'];
                        pointsGoodsSpec.defaultGoodsSpec.goods_stock = parseInt(allGoodsSpecValue[i]['spec_stock']);
                        pointsGoodsSpec.defaultGoodsSpec.goods_points = parseInt(allGoodsSpecValue[i]['spec_points']);
                        pointsGoodsSpec.defaultGoodsSpec.goods_price = parseFloat(allGoodsSpecValue[i]['spec_price'].toFixed(2));
                        break;
                    }
                }
            }

            function confirmSubmit() {
                layer_loading('正在处理');
                // 获取购买数量
                pointsGoodsSpec.defaultGoodsSpec.goodsBuyNumber = $('#goodsBuyNumber').val();
                $.ajax({
                    url : goodsBuyPreHandle,
                    data: pointsGoodsSpec.defaultGoodsSpec,
                    type: 'post',
                    dataType: 'json',
                    success: function(res) {
                        layer.closeAll();
                        if (1 === parseInt(res.code)) {
                            window.location.href = res.url;
                        } else {
                            showErrorAlert(res.msg);
                        }
                    },
                    error: function(e) {
                        layer.closeAll();
                        showErrorAlert(e.responseText);
                    }
                });
            }

            function sortNumber(a, b) { 
                return a - b 
            }
        </script>

        {eyou:include file="/template/pc/users/users_footer.htm" /}
        <script type="text/javascript">
            $(document).ready(function() {
                var showproduct = {
                    "boxid": "showbox",
                    "sumid": "showsum",
                    "boxw": 400, //宽度,该版本中请把宽高填写成一样
                    "boxh": 400, //高度,该版本中请把宽高填写成一样
                    "sumw": 60, //列表每个宽度,该版本中请把宽高填写成一样
                    "sumh": 60, //列表每个高度,该版本中请把宽高填写成一样
                    "sumi": 7, //列表间隔
                    "sums": 5, //列表显示个数
                    "sumsel": "sel",
                    "sumborder": 1, //列表边框，没有边框填写0，边框在css中修改
                    "lastid": "showlast",
                    "nextid": "shownext"
                }; //参数定义     
                $.ljsGlasses.pcGlasses(showproduct); //方法调用，务必在加载完后执行
            });
          function toggleTab(tabName) {
            // 隐藏所有内容
            var contentElements = document.querySelectorAll('.details div');
            contentElements.forEach(function(element) {
              element.style.display = 'none';
            });
        
            // 显示目标内容
            var targetContent = document.getElementById(tabName + 'Content');
            targetContent.style.display = 'block';
        
            // 更新活动标签状态
            var tabElements = document.querySelectorAll('.tab-nav li');
            tabElements.forEach(function(element) {
              if (element.querySelector('a').getAttribute('href') === '#' + tabName) {
                element.classList.add('active');
              } else {
                element.classList.remove('active');
              }
            });
          }
        </script>